<script lang="ts" setup>
import { computed } from 'vue';
    const props = defineProps({
        recordList: {
            type: Object,
            default: () => {
                return {
                    data: [],
                    bottom: false, // 是否已经到底了
                    noDataTips: '已经到底了~',
                    loadMoreText: '点击加载更多',
                    emptyText: '您还没有变更记录哟~'
                }
            }
        },
    })
    const {recordList} = props
    const loadMoreList = computed(() => {
        return recordList.data
    })
    const emit = defineEmits(['fetchData'])
    // 到底了点击更新列表
    const fetchData = () => {
        emit('fetchData')
    }
</script>

<template>

    <a-list 
        class="list-timeline"
        :bordered="false"
        :split="false"
        >
        <template #scroll-loading  v-if="recordList.data.length">
            <div v-if="recordList.bottom">{{recordList.noDataTips}}</div>
            <div v-else @click="fetchData">
                <a-button type="text">{{recordList.loadMoreText}}</a-button>
            </div>
        </template>
        <template #empty v-else>
            <div class="dis-flex align-item justify-center">
                {{recordList.emptyText}}
            </div>
        </template>
        <a-list-item v-for="(item, index) of loadMoreList">
            <a-timeline labelPosition="relative" :class="{'lastTimeLine': index === loadMoreList.length-1}">
                <a-timeline-item :label="item.createTime"  :dotColor="!!index ? '#E8EBF2' : ''">
                    <a-row :style="{ display: 'inline-flex', alignItems: 'center' }">
                        <slot name="content" :item="item"></slot>
                    </a-row>
                </a-timeline-item>
            </a-timeline>
        </a-list-item>
    </a-list>
</template>

<style lang="scss" scoped>
.list-timeline :deep(.arco-list-content .arco-list-item){
    padding: 0;
    .arco-timeline-item-dot-line {
        display: block;
    }
}

.list-timeline :deep(.arco-timeline-item-vertical-left.arco-timeline-item-label-relative) {
    margin-left: 150px;
}
.list-timeline :deep(.arco-timeline-item-label-relative > .arco-timeline-item-label) {
    max-width: 200px;
    width: 150px;
}
.list-timeline .lastTimeLine :deep(.arco-timeline-item-dot-line) {
    display: none !important;
}
 
</style>